@color: yellow;
@length: 200px;

.box4{
    @length: 50px;
    width: @length;
}


.layout {
    display: flex;
    justify-content: space-between;
}

.margin(@value) {
    margin: @value;
}

.globalStyle(@width, @height, @color) {
    width: @width;
    height: @height;
    background-color: @color;
}


.box1 {
    width: @length + 100px;
    height: @length;
    background-color: @color;
    .layout;
    .margin(10px);
}

.box2 {
    .margin(20px);
    .globalStyle(100px, 100px, pink);
}

.box3 {
    .globalStyle(300px, 60px, yellow);
}

header{
    ul{
        display: flex;
        width: 100%;
        li{
            flex-grow: 1;
            a{
                text-decoration: none;
            }
            &:hover{
                width: 50px;
            }
        }
    }
}

